<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <link rel="stylesheet" href="../Style.css">
    <script src="../SwipedEvents.js" defer></script>
    <script src="../Script.js" defer></script>
</head>
<body>
    <div class="page-wrapper">
        <div class="page">
            <img class="platform-mac" src="../Icon.png" width="128" height="128" alt="Web Scrobbler Icon" />
            <img class="platform-ios big-image" src="../compiledsettings.jpg" alt="Image showing user in settings clicking Safari, then clicking Extensions, then clicking Web Scrobbler" />
            <p class="platform-ios">To turn on Web Scrobbler, first go to Settings -> Safari -> Extensions -> Web Scrobbler.</p>
            <p class="platform-mac state-unknown">You can turn on Web Scrobbler’s extension in Safari Extensions preferences.</p>
            <p class="platform-mac state-on">Web Scrobbler’s extension is currently on. You can turn it off in Safari Extensions preferences.</p>
            <p class="platform-mac state-off">Web Scrobbler’s extension is currently off. You can turn it on in Safari Extensions preferences.</p>
            <button class="platform-mac open-preferences">Quit and Open Safari Extensions Preferences…</button>
        </div>
        <div class="platform-ios page">
            <img src="../settinglist.jpg" class="big-image" alt="" />
            <ol>
                    <li>Enable Web Scrobbler</li>
                    <li>Allow Web Scrobbler to read website data</li>
                    <li>Enter Web Scrobbler settings to log in to your scrobbling service</li>
            </ol>
        </div>
        <div class="platform-ios page">
            <img src="../accounttab.jpg" class="big-image" alt="" />
            <p>Go to the account tab of settings and sign into your scrobbling service</p>
        </div>
        <div class="platform-ios page">
            <img src="../safaricontextmenu.jpg" class="big-image" alt="" />
            <p>You can check extension info and edit scrobbles through the extension icon in the safari context menu</p>
        </div>
    </div>
    <button id="prev" class="platform-ios nav-button">
        <svg viewBox="0 0 24 24">
            <path d="M17.77 3.77 16 2 6 12l10 10 1.77-1.77L9.54 12z" />
        </svg>
    </button>
    <button id="next" class="platform-ios nav-button">
        <svg viewBox="0 0 24 24">
            <path d="M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z" />
        </svg>
    </button>
</body>
</html>
